<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="616px"
      :title="model.text"
      wrapClassName="add-modal-container"
      @cancel="closeModal()"
    >
      <div v-loading="formLoading">
        <a-form-model ref="ruleForm" :model="form" :rules="rules">
          <!-- 登录账号 -->
          <a-form-model-item ref="loginId" label="登录账号" prop="loginId">
            <a-input
              v-model.trim="form.loginId"
              placeholder="请输入登录账号"
              :maxLength="50"
            />
          </a-form-model-item>
          <!-- 昵称 -->
          <a-form-model-item ref="userName" label="昵称" prop="userName">
            <a-input
              v-model.trim="form.userName"
              placeholder="请输入昵称"
              :maxLength="50"
            />
          </a-form-model-item>
          <!-- 密码 -->
          <a-form-model-item
            ref="password"
            label="设置密码"
            prop="password"
            v-if="!model.id"
          >
            <a-input v-model.trim="form.password" placeholder="请输入密码" />
          </a-form-model-item>
          <!-- 再次确认密码 -->
          <a-form-model-item
            ref="newPwd"
            label="再次确认密码"
            prop="newPwd"
            v-if="!model.id"
          >
            <a-input v-model.trim="form.newPwd" placeholder="请再次输入密码" />
          </a-form-model-item>
          <!-- 手机号 -->
          <a-form-model-item ref="mobile" label="手机号" prop="mobile">
            <a-input v-model.trim="form.mobile" placeholder="请输入手机号" />
          </a-form-model-item>
          <!-- 邮箱 -->
          <a-form-model-item ref="email" label="邮箱" prop="email">
            <a-input v-model.trim="form.email" placeholder="请输入邮箱" />
          </a-form-model-item>
          <!-- 用户状态 -->
          <a-form-model-item ref="userState" label="用户状态" prop="userState">
            <a-select v-model="form.userState" placeholder="请选择用户状态">
              <a-select-option value="1"> 未激活 </a-select-option>
              <a-select-option value="2"> 正常 </a-select-option>
              <a-select-option value="3"> 已注销 </a-select-option>
              <a-select-option value="4"> 密码锁定 </a-select-option>
            </a-select>
          </a-form-model-item>
          <!-- 角色 -->
          <a-form-model-item ref="roleId" label="角色" prop="roleId">
            <a-select
              v-model="form.roleId"
              mode="multiple"
              placeholder="请选择角色"
            >
              <a-select-option
                :value="item.id"
                v-for="(item, index) in roleData"
                :key="index"
              >
                {{ item.roleName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <!-- 备注 -->
          <a-form-model-item ref="remark" label="备注" prop="remark">
            <a-input
              v-model="form.remark"
              placeholder="请输入备注"
              type="textarea"
              style="height: 100px"
              :maxLength="255"
            />
          </a-form-model-item>
        </a-form-model>
        <div class="form-footer flex">
          <a-button type="default" @click="closeModal()">取消 </a-button>
          <a-button type="primary" :loading="loading" @click="submit">
            提交
          </a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {
  getUserAdd,
  getUserRole,
  getUserDetails,
} from "@/api/user-center/userManage.js";
import { notificationTip } from "@/utils";
export default {
  name: "addModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    model: {
      type: Object,
      default: {},
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getRoleList();
          if (this.model.id) {
            this.getDetail();
          }
        }
      },
      immediate: true,
    },
  },
  data() {
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.form.newPwd !== "") {
          this.$refs.ruleForm.validateField("newPwd");
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      form: {
        //登录账号
        loginId: undefined,
        //昵称
        userName: "",
        //密码
        password: "",
        newPwd: "",
        //手机号
        mobile: "",
        //邮箱
        email: "",
        //用户状态
        userState: undefined,
        //角色
        roleId: undefined,
        //备注
        remark: "",
      },
      formLoading: false,
      rules: {
        userName: [{ required: true, message: "请输入昵称" }],
        loginId: [{ required: true, message: "请输入登录账号" }],
        password: [
          { validator: validatePass, required: true },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
          },
        ],
        newPwd: [{ validator: validatePass2, required: true }],
        userState: [{ required: true, message: "请选择用户状态" }],
        mobile: [
          {
            required: false,
            message: "请输入手机号",
          },
          {
            pattern: /^1[0-9]{10}$/,
            message: "请输入正确的手机号",
          },
        ],
        email: [
          {
            required: false,
            message: "请输入邮箱",
          },
          {
            pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
            message: "请输入正确的邮箱地址",
          },
        ],
      },
      roleData: [],
    };
  },
  mounted() {},
  methods: {
    //查询角色下拉框
    getRoleList() {
      let {
        left: { proName },
      } = this.$parent;
      getUserRole({ tenantCode: proName })
        .then((res) => {
          let { data } = res;
          this.roleData = data.result || [];
        })
        .catch((_) => {
          this.roleData = [];
        });
    },
    getDetail() {
      this.formLoading = true;
      let { id } = this.model;
      getUserDetails(id)
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.form = {
            //登录账号
            loginId: result.loginId,
            //昵称
            userName: result.userName,
            //密码 result.pwdDomainCode
            password: "",
            //确认密码 result.pwdDomainCode
            newPwd: "",
            //手机号
            mobile: result.mobile,
            //邮箱
            email: result.email,
            //用户状态
            userState: result.userState.toString(),
            //角色
            roleId: result.roleId ? result.roleId.split(",") : undefined,
            //备注
            remark: result.remark,
          };
        })
        .catch((_) => {})
        .finally((_) => {
          this.formLoading = false;
        });
    },
    //提交
    submit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          let { form } = this;
          let { orgId, id } = this.model;
          let formJson = {
            //登录账号
            loginId: form.loginId,
            //昵称
            userName: form.userName,
            //密码
            password: form.password,
            //手机号
            mobile: form.mobile,
            //邮箱
            email: form.email,
            //用户状态
            userState: form.userState,
            //组织id
            orgId: orgId,
            //角色
            roleId: form?.roleId ? form?.roleId.toString() : "",
            //备注
            remark: form.remark,
          };
          if (id) {
            formJson.id = id;
          }
          getUserAdd(formJson)
            .then((res) => {
              let msg = "新增用户成功！";
              if (id) {
                msg = "编辑用户成功！";
              }
              notificationTip("success", msg);
              this.closeModal();
              this.$parent.getTableData();
            })
            .catch((_) => {})
            .finally((_) => {
              this.loading = false;
            });
        }
      });
    },

    //关闭弹窗
    closeModal() {
      this.form = {
        //登录账号
        loginId: undefined,
        //昵称
        userName: "",
        //密码
        password: "",
        newPwd: "",
        //手机号
        mobile: "",
        //邮箱
        email: "",
        //用户状态
        userState: undefined,
        //角色
        roleId: undefined,
        //备注
        remark: "",
      };
      this.resetForm();
      this.$emit("update:visible", false);
    },

    //重置表单
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    filterkey(data = undefined) {
      return data ? data.key : "";
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 20px 40px 20px 0px;
    .ant-form-item {
      .flex();
      .ant-form-item-label {
        flex-shrink: 0;
        width: 144px;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
      }
    }
    .form-footer {
      justify-content: center;
    }
  }
}
</style>
